<template>
  <div class="demo-title">image-preview/demo2</div>
  <div class="demo">
    <img v-for="(item, i) in imagePreview.datas" :key="`item${i}`" :src="item.src" @click="openPreview(i)" />
  </div>
  <ImagePreview v-model:visible="imagePreview.visible" :images="imagePreview.datas" :init-no="imagePreview.initNo" @on-change="onChangeImagePreview" />
</template>

<script lang="ts" setup>
  import { reactive } from 'vue'
  import ImagePreview from '@sscd-mobile/image-preview'
  const imagePreview = reactive({
    visible: false,
    datas: [
      { src: 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-1.png' },
      { src: 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-2.png' },
      { src: 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/swiper/swiper-3.png' },
    ],
    initNo: 0,
  })
  const openPreview = (i: number) => {
    imagePreview.visible = true
    imagePreview.initNo = i
  }
  const onChangeImagePreview = (e) => console.log('onChangeImagePreview: ', e)
</script>

<style lang="less" scoped>
  .demo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 12px;
    > img {
      width: 110px;
      height: 110px;
    }
  }
</style>
